<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-20 09:56:24
 * @Description: 菜单树形单选
 -->
<template>
  <div ref="reference">
    <fks-popover
      ref="popover"
      placement="bottom"
      :width="inputWidth"
      :trigger="readonly ? 'manual' : 'click'"
      @show="visible = true"
      @hide="visible = false"
    >
      <fks-input
        v-model="keywords"
        size="mini"
        class="fks-select-search"
        maxlength="50"
        placeholder="门户名称"
      />
      <fks-tree
        ref="tree"
        :data="portals"
        style="max-height: 200px; overflow: auto"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleClick"
      >
        <span slot-scope="{ data }">{{ data.content.name }}</span>
      </fks-tree>
    </fks-popover>
    <fks-input
      v-model="text"
      v-popover:popover
      readonly
      placeholder="请选择"
      :suffix-icon="visible ? 'fks-icon-arrow-up' : 'fks-icon-arrow-down'"
      style="cursor: pointer"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import {
  addResizeListener,
  removeResizeListener
} from 'fawkes-lib/lib/utils/resize-event'
import { getPortals } from '../api'
export default {
  name: 'PortalSelector',
  props: {
    parentId: {},
    pathId: {
      type: String
    },
    parentName: {
      type: String
    },
    pathName: {
      type: String
    },
    //编辑时传递id
    id: {
      type: String
    },
    //编辑时传name
    name: {
      type: String
    },
    readonly: Boolean
  },
  data() {
    return {
      visible: false,
      inputWidth: '310',
      keywords: '',
      portals: []
    }
  },
  computed: {
    text() {
      return this.getCurrentNode(this.portals, this.parentId) || this.parentName
    }
  },
  watch: {
    keywords(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.getData()
    //监听resize事件，改变选择框宽度
    this.$nextTick(() => {
      const reference = this.$refs.reference
      addResizeListener(reference, this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    const reference = this.$refs.reference
    removeResizeListener(reference, this.handleResize)
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      getPortals()
        .then((res) => {
          this.loading = false
          if (res.status) {
            this.portals = res.data
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    /**
     * @description: 点击节点
     * @param {type}
     * @return:
     */
    handleClick(data, node) {
      this.$emit(
        'update:pathId',
        `${data.content.pathId}${this.id ? this.id + '.' : ''}`
      )
      this.$emit(
        'update:pathName',
        `${data.content.pathName}${this.name ? this.name + '.' : ''}`
      )
      this.$emit('update:parentId', data.content.id)
      this.$emit('update:parentName', data.content.name)
      this.$refs.popover.doClose()
    },
    /**
     * @description: 获取选中文本
     * @param {type}
     * @return:
     */
    getCurrentNode(arr, val, res = []) {
      arr.forEach((item) => {
        if (item.id == val) {
          res.push(item)
        } else if (item.children) {
          this.getCurrentNode(item.children, val, res)
        }
      })
      return res.length > 0 ? res[0].content.name : ''
    },
    /**
     * @description: 树节点过滤
     * @param {type}
     * @return:
     */
    filterNode(value, data) {
      if (!value) return true
      return data.content.name.indexOf(value) !== -1
    },
    /**
     * @description: 宽度resize
     * @param {type}
     * @return:
     */

    handleResize() {
      this.$nextTick(() => {
        let reference = this.$refs.reference
        if (reference) {
          this.inputWidth = Math.max(
            reference.getBoundingClientRect().width - 20,
            200
          )
        }
      })
    }
  }
}
</script>

<style scoped>
</style>
